// 
const HtmlWebpackPlugin = require('html-webpack-plugin');
// css压缩插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 样式分离
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require('path');
const config = {
    // entry: './src/index.js',
    entry: {
        app: {
            import: './src/index.js',
            // 自定义文件名
            filename: 'app.js',
            // 依赖
            // dependOn: []
        }
    },
    output: {
        // name--文件原名  file--原始路径，带文件名、后缀  base--原有文件名+后缀  path--只有路径  id-- 
        filename: '[name].js',
        path: path.resolve(__dirname, './dist'),
        // 修改输出文件名称(非初始chunk文件的名称),
        // chunkFilename: 'asset_[id]'
        // 按需加载或外部资源的真实路径，默认为相对路径 
        // publicPath: '',

        // 导出库
        // library: 'my-library'
   },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    // 构建模式--根据mode使用不同的配置来构建
    mode: 'development', // development开发模式   production生产模式 none默认模式
    plugins: [
        new HtmlWebpackPlugin({
            title: '大森的网站',
            filename: 'app.html',
            template: path.resolve(__dirname, './src/index.html'),
            // 编辑模板内的title
            templateParameters: {
                titleName: '大森的网站',
            },
            // script与style的路径，这里需要注意：如果设置了，页面上的引入会变成该publicPath下的cdn
            // publicPath: 'https://www.baidu.com/',
            // publicPath: '127.0.0.1:8080/',
            // 压缩配置 
            minify: {
                collapseWhitespace: true, // 是否压缩空格
                keepClosingSlash: true,
                removeComments: true, // 是否移除注释
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                removeEmptyAttributes: true, // 是否移除空格
            }
        }),
        // 样式文件分离
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].css',
        })
    ],
    optimization: {
        minimizer: [
            // 样式分离插件,样式不在集于js中，打包分离至.css文件内
            new CssMinimizerPlugin({
                test: /\.css$/, // 匹配需要压缩的文件；文件匹配
                // 文件包含
                // include: [],
                // 文件排除 
                // exclude: [],
                // 是否启用多进程,依赖cpu数量
                // parallel: 
                // 压缩
                // minify: {

                // }
            }) 
        ]
    },
    // source-map 显示源码  hidden-nosources-source-map 隐藏源码
    devtool: 'source-map',
    // 服务器
    devServer: {
        /**
         * all跳过所有检查
         * auto对于localhost、host等允许访问
         * [string]允许指定host访问
        */
        allowedHosts: 'all',
        // 设置客户端展示相关
        client: {
            /**
             * overlay可设置编译出错时全屏覆盖错误
             * progress可设置编译进度展示
            */
            overlay: false, // 关闭报错
        },
        // 是否启用gzip,默认是true
        compress: true,
        host: '0.0.0.0', // 可被外部访问
        hot: 'only', // 编译出错改正不会刷新浏览器
        // 是否打开页面
        open: true,
        // 端口设置
        port: 9000,
        // 请求代理,解决跨域
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                // 设置https可以访问
                secure: true,
            }
        },
        // 设置请求协议,当前所使用的webpack版本不支持server配置
        // server: 'http',
        // 设置静态资源访问
        // static: ['assets'],
        static: {
            directory: path.resolve(__dirname, 'assets'),
            // 该项配置后，需要在文件地址前面加上该值/static
            publicPath: '/static',
        }
    }
} 

module.exports = (env, argv) => {
    // if (argv.mode === 'development') {
        return config;
    // }
}